<template >

	<div >

	<div class="order bgwhite">
	<flexbox :gutter="0">
	    <flexbox-item :span="1/5" class="text-center orderimg">
	    	<img :src="topPic" width="50" height="50"  >
	    </flexbox-item>

	    <flexbox-item :span="4/5" class="pt10 orderinfo">
	    	<div class="title fl h3 "> {{orderdata.title}} </div>
	    	<div class="fl i h4 row"> 
				<div class="info fl mb10">
					<div class="fl row mt10">
						共 {{orderdata.num}} 张，实付金额  
						<span class="red">
						 ¥{{parseFloat(orderdata.pay_fee * 0.01).toFixed(2)}} 
						</span>
					</div>
					<div class="fr row text-right mt10">
						已使用 {{orderdata.used}} 张 , 已退 {{orderdata.back}} 张
					</div>
				</div>
				<div class="use fr mb10">
					<div class="btn" v-on:click="use()">
						使用
					</div>
				</div>
			</div>
	    </flexbox-item>
	</flexbox>

	<flexbox v-if="orderdata.ticket_state == '9'" class="orderbottom  ">
		<flexbox-item class="red">
			订单失败：{{orderdata.cancel_reason}}
		</flexbox-item>
	</flexbox>

	<flexbox class="orderbottom  ">
	    <flexbox-item>
	    	<div class="fl time"> {{orderdata.create_time}} </div>
			<div class="fr time" v-on:click="orderinfo(orderdata.code)"> 查看详情 </div>
	    </flexbox-item>
	</flexbox>
	</div>

	<yd-popup  position="center"
	  v-model="popupVisible">
	  <div class="text-center bgwhite ticketcode">
	  	<qrcode-vue class=""
	  		:value="orderdata.order_unique_code" 
	  		:size="180" level="H">
	  	</qrcode-vue>
	  	<div class="mt10 code">{{ orderdata.order_unique_code }}</div>
	  </div>
	</yd-popup>

	</div>

</template>


<script >


import QrcodeVue from 'qrcode.vue';
// import { Popup } from 'mint-ui';
import { mapGetters } from 'vuex';


export default {

	name : 'order_list',

	data () {
		return {
			popupVisible : false,
		}
	},

	props: {
	    orderdata: {
	      type: Object,
	      default: {
	      		//'count' : 1,
	      }
	    },
	},

	computed : {
		topPic () {
			var strTopPic = '';

			if(this.orderdata.top_pic == undefined) {
				strTopPic = this.URL.defaultImg;
			}else{
				try{
					var ttt = JSON.parse(this.orderdata.top_pic);
					strTopPic = ttt[0].url;
				}catch(err){
					//console.log(err);
					strTopPic = this.URL.defaultImg;
				}
			}

			return strTopPic;
		},

		...mapGetters(['company_code', 'URL']),
	},

	components : {
		QrcodeVue
	},

	methods : {

		use (obj) {
			this.popupVisible = true;
		},

		orderinfo (ordercode) {
			console.log('orderinfo');
			console.log(ordercode);
			this.$router.push({ 
				'name': 'orderinfo', 
				params: { code: ordercode },
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		}
	}
}
	

</script>

<style scope>
.order {
	border-bottom: 1px solid #e2e2e2;
}

.order .orderimg {
	width: 20%;
	text-align: center;
}

.order .orderimg img {
	border-radius : 25px;
}

.order .orderinfo {
	width: 80%;
}

.order .orderinfo .title {
	width: 95%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	padding : 5px 0;
	border-bottom: 1px solid #e2e2e2;
}

.order .orderinfo .i {
	border-bottom: 1px solid #e2e2e2;
}

.order .orderinfo .i .info {
	width: 70%;
	color: #666666;
}

.order .orderinfo .i .use {
	width: 30%;
	text-align: center;
}

.order .orderinfo .i .use .btn {
	width: 60%;
	margin-left: 20%;
	height: 50px;
	line-height: 50px;
	margin-top: 10px;
	border: 1px solid red;
	font-size: 12px;
	color: red;
	border-radius : 5px;
}

.order .orderbottom {
	padding : 10px;
}

.order .orderbottom .time {
	font-size: 12px;
	color: #8E97AF;
}


.ticketcode {
	/*width: 200px;*/
	background-color: #fff;
	padding: 10px;
	/*height: 200px;*/
}

.ticketcode .code {
	font-size: 18px;
}

</style>